<template>
    <view class="content">
        <view class="scroll_wrapper">
            <!-- 服务状态 -->
            <view class="serviceStatus">
                <view class="serviceStatusTop">
                    <view class="serviceStatusTitle">服务状态</view>
                    <view class="act_more" @click="toServiceStatus">
                        <span class=" act_t" style="display: inline-block;">查看更多</span><van-icon name="arrow" />
                    </view>
                </view>
                <view class="serviceStatusSteps">
                    <!-- <van-steps :steps="steps" :active="active" active-color="#FF6203" /> -->
                    <view class="progress-container">
                        <!-- <view class="progressItem" v-for="(step, index) in steps" :key="index" :data-status="serviceStatus === 'canceled' ? 'canceled' : ''">
                            <view class="progress-step completed">
                                <view class="step-icon"><img :src="index<=activeIndex ? activeIcon : inactiveIcon"
                                        alt=""></view>
                                <view class="step-label">{{step.text}}</view>
                            </view>
                            <view class="progress-line-Item"
                                style="height: 34rpx; line-height: 34rpx; display: flex; flex-direction: column; justify-content: center;"
                                v-if="index<=(steps.length-2)">
                                <view :class="['progress-line', index < activeIndex ? 'completed' : '']"></view>
                            </view>
                        </view> -->
                        <view class="progressItem" v-for="(step, index) in steps" :key="index" :style="{ width: `${100 / steps.length}%` }">
                            <view class="progress-step completed">
                                <view class="step-icon"><img :src="index <= activeIndex ? activeIcon : inactiveIcon" alt=""></view>
                                <view class="step-label">{{ step.text }}</view>
                            </view>
                            <view class="progress-line-Item"
                                style="height: 34rpx; line-height: 34rpx; display: flex; flex-direction: column; justify-content: center;"
                                v-if="index <= (steps.length - 2)">
                                <view :class="['progress-line', index < activeIndex ? 'completed' : '']"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {
    },
    props: {
        activeIndex: {
            type:Number,
            default:0
        },
        active:{
            type:Number,
            default:0
        },
        serviceStatus:{
            type:String,
            default:'canceled'
        },
        reservationId:{
            type:String,
            default:''
        }
    },
    data() {
        return {
           
            // active:0,
            // activeIndex:0,
            steps: [
                {
                    text: '已预约',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '待服务',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '服务中',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '已完成',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                }
            ],
            params:undefined, //接受从路由传过来的参数
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',  
            inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png', 
            clickType:'button',
            progressWidth: '147rpx' // 默认值

        }
    },
    watch:{
        
        serviceStatus: {
            immediate: true,
            handler() {
                this.updateSteps()
            }
        }
    },
    onLoad(data) {
        if(data!==null){
            // this.params=JSON.parse(decodeURIComponent(data.params))
            // this.active=Number(this.params.actStatus)
            // this.activeIndex=Number(this.params.actStatus)
           
        }
    },
    onReady () {
        
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft() {
            uni.navigateBack()
        },
        async calculateStepDistances() {
            const query = wx.createSelectorQuery().in(this);
            const icons = await Promise.all(
                this.steps.map((_, index) => {
                    return new Promise(resolve => {
                        query.select(`.progressItem:nth-child(${index + 1}) .step-icon`)
                            .boundingClientRect(rect => resolve(rect))
                            .exec()
                    })
                })
            )

            const distances = [];
            for (let i = 1; i < icons.length; i++) {
                if (icons[i] && icons[i - 1]) {
                    const distance = icons[i].left - (icons[i - 1].left + icons[i - 1].width);
                    distances.push(distance);
                }
            }
            return distances;
        },

        async updateSteps(status) {
            if (this.serviceStatus === 'canceled') { //取消
                this.steps = [
                    {
                        text: '已预约',
                        // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                        activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                    },
                    {
                        text: '待服务',
                        // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                        activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                    },
                    {
                        text: '已取消',
                        // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                        activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                    },
                    // {
                    //     text: '',
                    //     // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    //     activeIcon: ''
                    // }
                ]
            } else {
                // 原有正常状态逻辑保持不变
                switch (this.active) {
                    case 0:
                        this.handleNormalStatus(0, '已预约', 4);
                        break;
                    case 1:
                        this.handleNormalStatus(1, '待服务', 4);
                        break;
                    case 2:
                        this.handleNormalStatus(2, '服务中', 4);
                        break;
                    case 3:
                        this.handleNormalStatus(3, '已评价', 4);
                        break;
                }
            }
            await this.$nextTick();
            const distances = await this.calculateStepDistances();
            console.log('步骤间距:', distances);
        },

        // 公共处理方法
        handleNormalStatus(activeIndex, title, stepCount) {
            this.steps = Array.from({ length: stepCount }, (_, i) => ({
                text: ['已预约', '待服务', '服务中', '已完成'][i],
                activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            }))
        },

         // 流程图左侧的竖线
         getItemHeight(index) {
            return new Promise((resolve) => {
                const query = wx.createSelectorQuery().in(this);
                query.select(`#timeline_content${index}`).boundingClientRect((rect) => {
                    console.log(rect,'rect')
                    const contentHeight = rect.height;
                    resolve(contentHeight + 30); 
                }).exec();
            });
        },
        async setTimelineLineHeight(index) {
            const height = await this.getItemHeight(index);
            console.log(height,'kkkll')
            this.timelineLinesHeight[index]= height + 'px'
            console.log(this.timelineLinesHeight)
            this.$forceUpdate()
            // return new Promise((resolve) => {
            //     // 可以简单地通过 setTimeout 模拟等待视图更新完成，实际可能需要更精准的判断机制
            //     setTimeout(() => {
            //         resolve();
            //     }, 0);
            // });
        },
        // 查看服务状态
        toServiceStatus(){
            const params={
                serviceStatus:this.serviceStatus,
                activeIndex:this.activeIndex,
                reservationId:this.reservationId
            }
            uni.navigateTo({
                url:'/pages/myService/serviceProcess?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },


    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    // height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll_wrapper{
    // padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
}


//服务状态
.serviceStatus {
    padding-top: 55rpx;
    margin: 0rpx 48rpx;
    border-bottom: 1px solid #f0f0f0;

    .serviceStatusTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .serviceStatusTitle {
            font-size: 36rpx;
            line-height: 36rpx;
            text-align: left;
            color: #111111;
        }

        .act_more {
            line-height: 24rpx;
            vertical-align: middle;
            height: 24rpx;
            font-size: 24rpx;
            text-align: right;
            color: #666666;

            .act_t {
                color: #888888;
                font-size: 24rpx;
                line-height: 24rpx;
                margin-right: 17rpx;
            }

            .act_Im {
                vertical-align: -2rpx;
            }
        }
    }

    .serviceStatusSteps {
        padding-top: 48rpx;
        padding-bottom: 48rpx;
    }
}



::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}


 .t16{
    margin-top: 16px;
 }


 .progress-container {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    justify-content: space-between;
    // justify-content: flex-start;
}
.progressItem{
    position: relative;
    // width: 25%;
    // width: 100%;
    // 修复所有状态下的连接线位置
        &:not(:last-child) .progress-line-Item {
            width: calc(100% - 34rpx); // 34rpx*2 (图标半径)
            left: 40%;
            margin-left: 34rpx;
        }
}
.progress-step {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.step-icon {
    width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    // background-color: #D4D4D4;
    // color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-size: 12px;
    img{
        width: 34rpx;
        height: 34rpx;
    }
}

.completed.step-icon {
    background-color: #FF6203;
}

.step-label {
    margin-top: 34rpx;
    font-size: 28rpx !important;
    line-height: 28rpx;
    text-align: center;
    color: #111111;
}

.progress-line-Item{
    position: absolute;
    top: 0rpx;
    // left: 56rpx;
    left: 50%;  // 居中定位
    width: 50%;  // 占据父容器后半部分
    margin-left: -34rpx;  // 向左偏移图标半径
}
.progress-line {
    height: 4rpx;
    // width: 147rpx;
    // width: 100%;
    width: v-bind('progressWidth'); /* 使用Vue3特性绑定动态值 */
    background-color: #D4D4D4;
    // margin: 0rpx 8rpx;
}

.completed.progress-line {
    background-color: #FF6203;
}


// 取消状态下的样式调整  最后一个不显示
.progressItem[data-status="canceled"]:last-child {
    .step-icon,
    .step-label {
        visibility: hidden;
    }
    
    .progress-line-Item {
        display: none !important;
    }
}

// 
// 修改状态条件判断方式  倒数第三那条线不显示
.progressItem[data-status="canceled"]:nth-child(3) .progress-line-Item {
    display: none !important;
}

::v-deep .van-button--primary {
    background: #ff6203 !important;
    background-color: #ff6203 !important;
    color: #ffffff;
    border: none !important;
    font-size: 28rpx !important;
    border-radius: 50rpx;
    width: 100%;
}
</style>
